<template>
  <div class="app-container">
    <el-form label-width="120px" :model="ruleForm" ref="ruleForm">
      <el-row :gutter="24" style="margin-bottom: 60px;">
        <el-divider content-position="left">
          <legend class="divider-line">拼购详情</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="促销标题：">
            <div class="yxkj-word-black">{{ actBidding.name }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="拼购分类：">
            <div class="yxkj-word-black">{{ actBidding.typeName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="关联商品：">
            <div class="yxkj-word-black">{{ actBidding.productName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属商家：">
            <div class="yxkj-word-black">{{ actBidding.sellerName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="市场价：">
            <div class="yxkj-word-black">{{ actBidding.marketPrice }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="初始价格：">
            <div class="yxkj-word-black">{{ actBidding.price }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="首付款：">
            <div class="yxkj-word-black">{{ actBidding.firstPrice }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="阶梯价格：">
            <el-table :data="actBiddingPrices" border style="width: 80%">
              <el-table-column prop="saleNum" label="销量"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="限购数量：">
            <div class="yxkj-word-black">
              {{ actBidding.purchase }}
              <span class="form-word-hint">限购数量，每人每次下单最多可以购买多少商品，最少为1</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="库存：">
            <div class="yxkj-word-black">
              {{ actBidding.stock }}
              <span class="form-word-hint">库存是此活动的库存，和商品库存是区分开的，下单不减商品库存，减此活动的库存。</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="渠道：">
            <div class="yxkj-word-black">
              {{ codeBox.CHANNEL[actBidding.channel] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动时间：">
            <div class="yxkj-word-black">{{ actBidding.startTime }} - {{ actBidding.endTime }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="首款截止时间：">
            <div class="yxkj-word-black">{{ actBidding.firstEndTime }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="尾款截止时间：">
            <div class="yxkj-word-black">{{ actBidding.lastEndTime }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动图片：">
            <div class="yxkj-word-black">
              <el-image style="width: 150px; height: 150px" :src="$imagePath + actBidding.image"></el-image>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动描述：">
            <div class="yxkj-word-black" v-html="actBidding.descinfo"></div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <div class="fixed-bottom-20">
            <el-button type="success" @click="back()">返回</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { lookActBidding } from "@/api/promotion";
import { getCodeManager } from "@/api/all";
import { Message } from 'element-ui'
export default {
  name: "biddinglook",
  data() {
    return {
      actBidding: {},
      actBiddingPrices: []
    };
  },
  created() {
    let id = this.$route.query.id;
    lookActBidding({ id: id }).then(res => {
      this.actBidding = res.data.data.actBidding,
      this.actBiddingPrices = res.data.data.actBiddingPrices
    });
    getCodeManager("ACT_STATUS,CHANNEL,COUPON_TYPE", () => {});
  },
  methods: {
    back() {
      history.back();
    }
  }
};
</script>
<style scoped>
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
.el-form-item {
  margin-bottom: 5px;
}
.picture-list {
  display: flex;
}
.picture-list li {
  list-style: none;
  margin-right: 10px;
}
</style>
